<template>
    <div class="login_container">
        <div class="login_box">
            <div class="head_logo"><img src="../../assets/u011.jpg" alt=""></div>

            <!-- 登录表单 -->
            <el-form ref="loginFormRef" label-width="0px" class="login_form" :rules="loginFormRules" :model="loginForm">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" suffix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" show-password placeholder="请输入密码" ></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="success" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 登录的表单数据绑定对象
            loginForm:{
                username:"gk",
                password:"123456",
            },
            // 表单验证规则对象
            loginFormRules:{
                // 验证规则名称
                username:[
                    {
                        required:true,//必填
                        message:'请输入用户名',//提示信息
                        trigger:'blur'
                    },
                    {
                        min:2,
                        max:10,
                        message:'长度在3到10个字符',
                        trigger:'blur'
                    }
                ],
                password:[
                    {
                        required:true,
                        message:'请输入密码',
                        trigger:'blur'
                    },
                    {
                        min:6,
                        max:15,
                        message:'长度在6-15个字符',
                        trigger:'blur'
                    }
                ]
            },
        }
    },
    methods: {
        login(){
            console.log('登录');
            // 登录前先判断是否符合验证规则,满足后向后提交数据
            
            this.$refs.loginFormRef.validate((valid)=>{
                if (valid) {
                    this.$http.get(`users?username=${this.loginForm.username}&password=${this.loginForm.password}`)
                    .then((result) => {
                        console.log(result);
                        if(result.data.length){
                            // 开启加载动画
                            let loading = this.$loading.service({
                                text:"登陆成功!请稍后......"
                            });
                            console.log("登陆成功",result.data);
                            this.$message.success("登陆成功!")
                            // 将登录用户存储到sessionStorage
                            window.sessionStorage.setItem("token",JSON.stringify(result.data[0]))
                            
                            let timer =setInterval(() => {
                                if(!sessionStorage.getItem("token")) return
                                loading.close()//关闭加载动画
                                this.$router.push('/home')//跳转路由
                                clearInterval(timer);
                            },300)
                        }else{
                            console.log("登陆失败")
                            this.$message.error("登陆失败!")
                        }
                    }).catch((err) => {
                        console.log(err);
                    });
                } 
            });//给form添加ref  
        },
        resetLoginForm(){
            this.$refs.loginFormRef.resetFields();
        }
    },
};
</script>
<style lang="scss" scoped>
.login_container {
  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  min-height: 720px;
  .login_box {
    width: 400px;
    height: 300px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .head_logo {
      height: 100px;
      width: 100px;
      border: 1px solid #ccc;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      // background: #fff;
      img {
        width: 100%;
        height: 100px;
        border-radius: 50%;
      }
    }
  }
  .login_form{
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 0px 20px;
      box-sizing: border-box;
  }
  .btns{
      display: flex;
      justify-content: space-between;
  }
}
</style>